import { defineStore } from 'pinia'
import { login, logout } from '@/api/login'
import { getToken, setToken, removeToken } from '@/utils/auth'
import { getInfo,getUserCategoryList,getUserAngleView } from '@/api/user'
import router from '@/router/index'
import { startDrive } from "@/utils/help";
import { to } from 'await-to-js';

// 1.定义并导出容器
// 参数1:容器的ID,必须唯一,将来Pinia会把所有的容器挂载到跟容器
export const useMainLogin = defineStore('userlogin',{
  /**
   * @returns
   * 类似于组件的data,用来存储全局状态的
   * 1.必须是函数:这样是为了在服务端渲染的时候避免交叉请求导致的数据状态污染
   * 2.必须是箭头函数,这是为了更好的 TS 类型推导
   * 返回值:一个函数,调用得到的容器实例
   */
  state: () => {
    return {
      token: getToken(),
      phonenumber: '',
      avatar: '',
      roles: [],
      permissions: [],
      userName: '',
      userId: '',
      position:'',
      height:0,
      basicInfo:{},
      category:[],
      isFirst:false,
      completeAll:false,
      townShipFlag:false
    }
  },
  /**
   * 类似于组件的computed,用来封装计算属性,有缓存的功能
   */
  getters: {

  },
  /**
   * 类似于组件的methods,封装业务逻辑,修改state
   */
  actions:{
      // 登录
      async Login(userInfo:any) {
        const [err, res] = await to(login(userInfo));
        if (res) {
          const data = res.data;
          setToken(data.access_token);
          this.token = data.access_token;
          return Promise.resolve();
        }
        return Promise.reject(err);
      },
      // 获取用户信息
      GetInfo() {
          return new Promise((resolve, reject) => {
              getInfo().then((res:any) => {
                  if(res.code === 200) {
                    this.userName = res.data.user.userName
                    this.userId = res.data.user.userId
                    this.roles = res.data.roles
                    localStorage.setItem("role", JSON.stringify(res.data.roles))
                  }
                  resolve(res)
              }).catch((error:any) => {
                  reject(error)
              })
          })
      },
      GetBasicInfo() {
        getUserAngleView().then((res:any) => {
          if(res.code === 200) {
            if(JSON.parse(res.data).radius == null) {
              this.position = [120.11695895039983,32.644696935695166]
              this.height = 1000
            }else {
              this.position = JSON.parse(res.data).position
              this.height = JSON.parse(res.data).radius
            }
            window.map.flyToPoint(this.position,{
              radius: this.height,
            })
          }
        })
      },
      // 退出系统
      LogOut() {
          return new Promise((resolve, reject) => {
              logout().then((res) => {
                if(res.code === 200) {
                  this.token = ''
                  this.roles = []
                  this.permissions = []
                  removeToken()
                  resolve()
                  router.push("/login")
                  ElMessage({message: '已登出!',type: 'success',})
                }
              }).catch((error:any) => {
                  reject(error)
              })
          })
      },
      // 前端 登出
      FedLogOut() {
          return new Promise(resolve => {
            this.token = ''
              removeToken()
              resolve()
          })
      },
      // 获取用户要素可用类别
      getUserCategoryList(type) {
        // getUserCategoryList(type).then(res => {
        //   if (res.code == 200) {
        //     this.category=[]
        //     res.data.forEach(element => {
        //       let item = {value: element}
        //       this.category.push(item)
        //     });
        //   }
        // })
      }
  }
})

// 2.使用容器中的state

// 3.修改state

// 4.容器中的action的使用
